<template>
  <div class="wrapper">
  <swiper :options = "swiperOption" v-if = "showSwiper">
    <!--v-if = "list.length"  当传递过来的list是个空数组时v-if的值是false,
        swiper不会被创建。当list传来数据时，swiper才会被创建。这样首页显示的会是第一张图  -->
    <!-- slides -->
    <swiper-slide v-for = "item of list" :key = "item.id">
        <img class = "swiper-img" :src= "item.imgUrl">
    </swiper-slide>  <!-- 使图片可以轮播 -->
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div> <!-- 显示分页（小圆点） -->
  <!-- slot 插槽 在用组件时，我们希望组件的一些内容能被父组件定制的时候，可以采用slot的形式往组件里传递一些可以被自己定制的内容  -->
  </swiper>
  </div>
</template>

<script>
export default {
  name: 'HomeSwiper',
  props: {
    list: Array
  },
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        loop: true
        // loop: true 让轮播插件支持轮播(即最后一页可以轮播至第一页)
      }
    }
  },
  computed: {
    showSwiper () {
      return this.list.length
    }
  }
}
</script>

<style lang="stylus" scoped>
  .wrapper >>> .swiper-pagination-bullet-active
    background #fff!important
    // 使小圆点的背景色为白色
  .wrapper
    overflow hidden
    width 100%
    height 0
    padding-bottom 27.25%
    background #eee
    .swiper-img
      width 100%
</style>
